<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>toDoList</title>
    <script type="text/javascript" src="jquery-2.1.4.min.js"></script>
</head>

<body>
    <!-- 

MVP设计模式:

MVP的主要思想就是解耦View和Model，通过中间人presenter层进行左右处理


     -->
    <!-- view层 通过事件dom 操作，交给presenter 交互中间人，而P层的交互中间人通过ajax
        操作model数据层，p层根据model数据在去操作view dom层


     -->
    <div id="app">
        <input type="text" name="inp" id="inp">
        <button type="button" id="btn">提交</button>
        <ul id="ul">
        </ul>
    </div>
    <script type="text/javascript">
    // Presenter – 交互中间人
    function Page() {};
    $.extend(Page.prototype, {
        init: function() {
            this.bindevents();
        },
        bindevents: function() {
            var btn = $("#btn");
            btn.on("click", $.proxy(this.handelbtnclk, this));
        },
        handelbtnclk: function() {
            var inp = $("#inp");
            var ul = $("ul");
            ul.append('<li>' + inp.val() + '</li>');
            inp.val('');
        }
    });
    var page = new Page();
    page.init();
    </script>
</body>

</html>